<template>
  <div class="index">
    <!-- 首页轮播图 -->
    <van-swipe
      class="my-swipe"
      :autoplay="2000"
      indicator-color="white"
      v-if="swipeImg"
    >
      <van-swipe-item v-for="item in swipeImg.data" :key="item.sid">
        <img :src="swipeURL + item.image" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 用户登录后的信息 -->
    <van-skeleton
      title
      avatar
      :row="1"
      :loading="loading"
      avatar-size="4rem"
      style="padding: 2vw"
    >
      <div class="user">
        <div v-if="user == null">
          <van-image
            class="head"
            round
            width="4rem"
            height="4rem"
            src="/imgs/default_head/default_head.jpg"
          />
          <router-link to="/login">
            <span>请您登录~</span>
          </router-link>
        </div>
        <div v-else>
          <van-image
            class="head"
            round
            width="4rem"
            height="4rem"
            :src="imgURL + user.data.avatar"
          />
          <router-link to="/home/me">
            <span>欢迎~{{ user.data.unames }}</span>
          </router-link>
        </div>
        <div>
          <router-link to="/reg">
            <van-icon name="manager-o" size="9vw" />
            <p>注册</p>
          </router-link>
          <a href="">
            <img src="../assets/imgs/index/hym.png" alt="" />
            <p>会员码</p>
          </a>
        </div>
      </div>
    </van-skeleton>

    <div class="index1">
      <van-row class="vanrow1">
        <!-- 自取 -->
        <van-col class="vancol" span="12" @click="goPro">
          <img src="../assets/imgs/index/zq.png" alt="" />
          <h4>自取</h4>
          <span>预约点单，到店自取</span>
        </van-col>
        <!-- 外卖 -->
        <van-col class="vancol" span="12">
          <img src="../assets/imgs/index/wm.png" alt="" />
          <h4>外卖</h4>
          <span>外卖下单，快速送达</span>
        </van-col>
      </van-row>
      <!-- 一起喝 -->
      <van-row class="vanrow2" type="flex" justify="space-between">
        <van-col class="vancol2" span="12" @click="goPro">
          <img src="../assets/imgs/index/drink-together.png" alt="" />
          <span>一起喝</span>
        </van-col>
        <van-col class="vancol2" span="12">
          <span>新年团聚，欢声笑语一起喝</span>
        </van-col>
      </van-row>
    </div>
    <!-- 活动介绍 -->
    <div class="index2">
      <van-row class="vanrow3" type="flex" justify="space-between">
        <van-col
          class="vancol3"
          span="8"
          v-for="item in thing"
          @click="$router.push(`/td${item.tid}`)"
          :key="item.tid"
        >
          <h3>{{ item.title }}</h3>
          <span>{{ item.subtit }}</span>

          <van-image lazy-load :src="thingURL + item.image">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>
        </van-col>
      </van-row>
    </div>
    <!-- 主页底部 会员新鲜事 -->
    <div class="index3">
      <div>
        <span>会员新鲜事</span>
      </div>
      <div>
        <router-link to="/news">
          <span>更多 </span>
          <img
            src="../assets/imgs/index/arrow-right.png"
            alt=""
            style="width: 3vw"
          />
        </router-link>
      </div>
    </div>
    <!-- 底部图片 -->
    <div class="index4" v-if="newImg">
      <div>
        <router-link to="/nd1">
          <img :src="newURL + newImg[0].image" alt="" />
        </router-link>
      </div>
      <div>
        <router-link to="/nd2">
          <img :src="newURL + newImg[1].image" alt="" />
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from "vuex";
export default {
  computed: {
    ...mapState([
      "imgURL",
      "user",
      "swipeURL",
      "newImg",
      "newURL",
      "thingURL",
      "swipeImg",
    ]),
  },
  data() {
    return {
      loading: true,
      //存放主页底部活动数据等
      thing: [],
    };
  },
  methods: {
    ...mapMutations(["updateNew"]),
    ...mapActions(["getNew", "getSwipe"]),
    //获取主页底部活动数据
    getThing() {
      const url = "home/thing";
      this.axios.get(url).then((res) => {
        console.log("主页底部活动图片", res);
        this.thing = res.data.data;
      });
    },
    // 创建跳转商品页方法
    goPro() {
      this.$router.push("/home/products");
    },
  },
  mounted() {
    this.loading = false;
    //挂载轮播图
    this.getSwipe();
    //挂载底部活动图片
    this.getThing();
    //挂载首页会员新鲜事图片
    this.getNew();
  },
};
</script>
<style lang="scss" scoped>
// 主页样式
//轮播图
.my-swipe {
  height: 56vw;
  img {
    width: 100%;
  }
}
//总容器
.index {
  margin-bottom: 50px; //不能让底部导航覆盖内容，这里vantui 设置的是固定高50px
  background-color: #f9faf9;
  //background-color: yellow;
  //通用样式 容器占页面宽度 类似于版心
  .index1 .vanrow1,
  .index1 .vanrow2,
  .index2 .vanrow3 {
    width: 90%;
    margin: auto;
    padding: 2vw;
    background-color: #fff;
  }
}
// 用户登录样式
.user {
  padding: 2.5vw;
  display: flex;
  justify-content: space-between;
  div:nth-child(1) {
    .head {
      vertical-align: middle;
    }
    span {
      margin-left: 1vw;
      font-size: 4.5vw;
      color: #929699;
    }
  }
  div:nth-child(2) {
    a {
      display: inline-block;
      width: 12vw;
      height: 100%;
      padding: 3% 0;
      text-align: center;
      img {
        width: 60%;
      }
      p {
        font-size: 2vw;
        color: #929699;
      }
    }
  }
}
//自取和外卖选择样式
.index1 {
  // 自取，外卖样式
  .vanrow1 {
    .vancol {
      height: 50vw;
      text-align: center;
      img {
        width: 100%;
      }
      h4 {
        font-size: 7vw;
      }
      span {
        color: #929699;
        font-size: 3.5vw;
      }
    }
    .vancol:nth-child(1) {
      border-right: 2px solid #dfe1e3;
    }
  }
  // 一起喝样式
  .vanrow2 {
    .vancol2 {
      border-top: 2px solid #dfe1e3;
      height: 10vw;
      line-height: 10vw;
      img {
        width: 15vw;
        vertical-align: middle;
      }
      span {
        font-size: 4vw;
      }
    }
    .vancol2:nth-child(2) {
      text-align: right;
      span {
        font-size: 3vw;
        color: #929699;
      }
    }
  }
}
//活动介绍
.index2 {
  margin-top: 15px;
  .vanrow3 {
    .vancol3 {
      height: 35vw;
      text-align: center;
      img {
        width: 100%;
        display: block;
      }
      h3 {
        font-size: 4vw;
      }
      span {
        color: #929699;
        font-size: 3vw;
      }
    }
    .vancol3:nth-child(2) {
      border-left: 2px solid #dfe1e3;
      border-right: 2px solid #dfe1e3;
    }
  }
}
//会员新鲜事
.index3 {
  display: flex;
  justify-content: space-between;
  padding: 2.5vw;
  div:nth-child(1) {
    span {
      color: #242524;
      font-size: 4vw;
      margin-left: 5vw;
    }
  }
  div:nth-child(2) {
    a {
      color: #929699;
      span {
        font-size: 3.5vw;
      }
      img {
        width: 4vw;
        vertical-align: middle;
      }
    }
  }
}
//底部图片样式
.index4 {
  div {
    padding: 1vw 2.5vw;
    a {
      img {
        width: 100%;
        display: block;
        border-radius: 2vw;
      }
    }
  }
}
</style>
